<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
        <el-tab-pane label="教师" name="teacher">
          <div class="filter-container">
            <el-row :gutter="12">
              <el-col :span="6">
                <el-input v-model="query.tid" 
                          clearable 
                          placeholder="工号" 
                          @clear="getPage"
                          @keyup.enter.native="handleFilter" />
              </el-col>
              <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
              </el-col>
              <el-col :span="3" :offset="13">
                <el-button type="primary" 
                           icon="el-icon-user" 
                           @click="addUser"
                           round>添加用户</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table
              :data="pageList"
              stripe
              style="width: 100%">
              <el-table-column
                prop="uid"
                label="工号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="password"
                label="密码">
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱">
              </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="学生" name="student">
          <el-table
              :data="tableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="uid"
                label="学号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="password"
                label="密码">
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱">
              </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="教室" name="room">
          <el-table
              :data="tableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="cid"
                label="班级"
                width="80">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                width="100">
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                width="80">
              </el-table-column>
              <el-table-column
                prop="profile"
                label="简介">
              </el-table-column>
              <el-table-column
                prop="total"
                label="人数"
                width="80">
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="使用期限">
              </el-table-column>
          </el-table>
        </el-tab-pane>
    </el-tabs>
    <el-dialog title="创建教师用户" :visible.sync="dialogFormVisible">
          <el-form 
            ref="teacherForm" 
            :rules="rules" 
            :model="temp" 
            size="small"
            label-position="right" 
            label-width="80px" 
            class="data-form">
        
            <el-form-item label="工号" prop="tid">
              <el-input v-model.number="temp.tid" placeholder="输入教师工号"/>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="temp.name" placeholder="输入教师姓名"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="temp.password" placeholder="输入用户密码"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="temp.email" placeholder="输入教师邮箱"/>
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="resetForm('teacherForm')">重置</el-button>
            <el-button type="primary" @click="submitForm('teacherForm')">确定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTeacher, getStudent, createTeacher } from '@/api/user'
import { fetchRooms } from '@/api/room'

export default {
  name: 'userList',
  components: {},
  data() {
    return {
      activeName: 'teacher',
      tableData: [],
      pageList:[],
      query:{
        tid: null, 
        aid: null,
        sid: null,
        page: 1,
        limit: 10,
      },
      dialogFormVisible:false,
      rules: {
        tid: [{required: true, message: '请填写教师工号', trigger: 'blur' },
              {type:'number',message: '请正确填写教师工号'}],
        name: [{ required: true, message: '请填写教师姓名', trigger: 'blur'}],
        password: [{ required: true, message: '请填写用户密码', trigger: 'blur'}],
        email:[{required: false, message: '请填写教师邮箱', trigger: 'blur' }]
      },
      temp: {
        tid: null,
        name:null,
        password:null,
        email:null,
      },
    }
  },
  computed: {
    ...mapGetters([
      'uid',
    ]),
  },
  created() {
    this.query.aid = this.uid
    this.getUserList(this.activeName)
  },
  methods: {
    handleClick(tab, event) {
      // this.getUserList(tab.name)
      this.getUserList(this.activeName)
    },
    getUserList(userType) {
      if(userType == 'teacher'){
        getTeacher(this.query).then(response => {
          this.tableData = response.load.userList
          this.getPage()
        }).catch(()=>{
          console.log("获取教师列表失败")
        })
      }else if(userType == 'student'){
        getStudent(this.query).then(response => {
          this.tableData = response.load.userList
        }).catch(()=>{
          console.log("获取学生列表失败")
        })
      }else{
        fetchRooms(this.query).then(response => {
          this.tableData = response.load.roomList
        }).catch(()=>{
          console.log("获取教室列表失败")
        })
      }
    },
    getPage(){
      this.pageList = this.tableData.filter((item, index) => 
        index < this.query.limit * this.query.page 
        && index >= this.query.limit * (this.query.page - 1))
    },
    handleFilter() {
      if(this.query.tid){
        this.pageList = this.tableData.filter(v=>v.uid == this.query.tid)
      }else{
        this.getPage()
      }
    },
    addUser(){
      this.dialogFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createTeacher(this.temp).then(response => {
            this.$message({
              message: '创建用户成功',
              type: 'success'
            })
            this.getUserList('teacher')
          }).catch(()=>{
            this.$message({
              message: '创建用户失败',
              type: 'error'
            })
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      this.dialogFormVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
  },
  filters: {
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  .filter-container {
    margin-bottom: 20px;
  }
  .data-form{
    width: 70%;
    margin-left:50px;
  }
}

// .tags-view-container {
//   height: 40px;
//   width: 100%;
//   background: #fff;
//   overflow: hidden;
  
// }
// .content-container{
//   // height: calc(100vh - 40px - 50px);
// }
</style>
